<template>
	<view class="pagebox">
		

	<view class="page">		
		 <!-- <view > -->
			 <div class="topBox">
				 <text>我的</text>
			 </div>
<!-- 			 <view class="bg">
			 	
			 </view> -->
			 <div class="avatorbox">
				 <image class="avator" @click="goPersonInfo" src="/static/image/home/avator.png" mode=""></image>
				 <view class="right" @click="goPersonInfo">
				 	<text class="top">大地探险家</text>
					<div class="bottom">
						<image src="/static/image/home/rank.png" mode=""></image>
						<text>LV2</text>
					</div>
				 </view>
				 <view class="acolc">
				 	<image @click="goClock" src="/static/image/mine/clock.png" mode=""></image>
				 </view>
			 </div>
			 <div class="day">
				 <div class="item " @click="goMyCollect">
					 <text class="txt">26</text>
					 <text class="time">我接收的</text>
				 </div>
				 <div class="item" @click="goMyShare">
					 <text class="txt">13</text>
					 <text class="time">我分享的</text>
				 </div>
				 <div class="item" @click="goHistory">
					 <text class="txt">58</text>
					 <text class="time">历史行程</text>
				 </div>
				  
			 </div>
			 
			 <view class="listbox">
			 	<view class="listitem" @click="handleItem(item)" v-for="(item, index) in list" :key="index">
			 		<view class="left">
			 			<image :src="item.src" mode=""></image>
			 		<text>{{item.title}}</text>
					</view>
					<view class="right">
						<text v-if="item.desc">{{item.desc}}</text>
						<image src="/static/image/login/right_arrow.png" mode=""></image>
					</view>
			 	</view>
			 </view>
	<!-- 		 <button @click="openMap">地图</button>
			 <button @click="openTest">测试页面</button> -->
			 
			 <view class="logout" @click="logout">
			 	<text >退出登录</text>
			 </view>
			 
			 <view class="" style="height: 190rpx;">
			 
			 </view>
			 
		<tabbar selected="4"></tabbar>
	</view>
	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue";
	import  poster from '../../static/image/home/poster.png'
	import accountmg from '../../static/image/mine/accountmg.png'
	import settings from '../../static/image/mine/settings.png'
	import xingchengstar from '../../static/image/mine/xingchengstar.png'
	import xingchnegcollect from '../../static/image/mine/xingchnegcollect.png'
	import feedback from '../../static/image/mine/feedback.png'
	import vip from '../../static/image/mine/vip.png'
	export default {
		components: {
			tabbar: tabbar,
		},
		data() {
			return {
				poster:poster,
				title: 'Hello',
				hasMore: true,
				  options: [
				  ],
				  activeDay: 0,
				  list: [						{						src: accountmg,						title: '账号管理'						},						{						src: vip,						title: '会员权益',
						desc: '权益说明'						},						{						src: feedback,						title: '意见反馈'						},						{						src: xingchnegcollect,						title: '行程收藏'						},
						{
						src: xingchengstar,
						title: '行程点赞'
						},						{						src: settings,						title: '设置'						},
				  ]
			}
		},
		methods: {
			openMap() {
				uni.navigateTo({
					url: '/pages/testmap/testmap'
				})
			},
			openTest() {
				uni.navigateTo({
					url: '/pages/test/test'
				})
			},
			logout() {
				uni.navigateTo({
					url: '/pages/oneClickLogin/oneClickLogin'
				})
			},
			goPage() {
				uni.navigateTo({
					url: '/pages/InternalMessage/InternalMessage'
				})
			},
			handleToday() {
				this.hasMore = true
				this.options = [
				]
				this.activeDay = 0
			},
			handleMore() {
				this.options = [
				]
				this.hasMore = false
				
			},
			handleTomorrow() {
				this.options = []
				this.activeDay = 1
			},
			handleItem(item) {
				let { title } = item
				if(title == '账号管理') {
					uni.navigateTo({
						url: '/pages/accountManage/accountManage'
					})
				} else if(title == '会员权益') {
					uni.navigateTo({
						url: '/pages/quite/quite'
					})
				} else if(title == '意见反馈') {
					uni.navigateTo({
						url: '/pages/Feedback/Feedback'
					})
				} else if(title == '行程收藏') {
					uni.navigateTo({
						url: '/pages/collect/collect'
					})
				} else if(title == '行程点赞') {
					uni.navigateTo({
						url: '/pages/star/star'
					})
				} else if(title == '设置') {
					uni.navigateTo({
						url: '/pages/settings/settings'
					})
				}
			},
			goClock() {
				uni.navigateTo({
					url: '/pages/alarm/alarm'
				})
			},
			goMyCollect() {
				uni.navigateTo({
					url: '/pages/myreceive/myreceive'
				})
			}, 
			goMyShare() {
				uni.navigateTo({
					url: '/pages/myshare/myshare'
				})
			},  
			goHistory() {
				uni.navigateTo({
					url: '/pages/historyStep/historyStep'
				})
			},
			goPersonInfo() {
				uni.navigateTo({
					url: '/pages/personInfo/personInfo'
				})
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less" scoped>
.step_circle2 {
  width: 18rpx;
  height: 18rpx;
  background: #FFFFFF;
  border: 2rpx solid #1076F2;
  border-radius: 50%;
  margin-left: 9rpx;
}
.step_line {
  width: 2rpx;
  height: 200%;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-left: 1rpx dotted #D9DFE6;
  }
  .setp_time {
	  color: #777777;
	  font-size: 28rpx;
	  line-height: 40rpx;
  }
  .setp_content {
	color: #080808;
	font-size: 28rpx;
	line-height: 40rpx;
  }
  
  // page {
	 //  height: 100%;
	 //  background: red;
  // }
  .pagebox {
	  min-height: 100vh;
	  background: #F3F5F6;
  }
  
  .page {
	  position: relative;
	// .bg {
	// 	width: 100%;
	// 	// height: 772rpx;
	// 	position: absolute;
	// 	top: 0;
	// 	z-index: 0;
	// 	background-image: url(../../static/image/mine/bg.png);
	// 	background-size: 100% 772rpx;
	// 	background-repeat: no-repeat;
	// }
	min-height: 772rpx;
	
	z-index: 0;
	background-image: url(../../static/image/mine/bg.png);
	background-size: 100% 772rpx;;
	background-repeat: no-repeat;

	padding-top: 114rpx;
	
	.topBox {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 36rpx;
		text {
			font-weight: bold;
			font-size: 34rpx;
			color: #221715;
			line-height: 51rpx;
		}
	}
	.avatorbox {
		position: relative;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx 30rpx 40rpx;
		.avator {
			width: 112rpx;
			height: 112rpx;
			margin-right: 20rpx;
			border: 4rpx solid #FFFFFF;
			border-radius: 50%;
		}
		.acolc {
			position: absolute;
			right: 20rpx;
			bottom: 42rpx;
			image {
				width: 72rpx;
				height: 72rpx;
			}
		}
		.right {
			display: flex;
			flex-direction: column;
			// align-items: center;
			.top {
				font-size: 34rpx;
				line-height: 48rpx;
				color: #221715;
				font-weight: bold;
				position: relative;
				.back {
					width: 60rpx;
					height: 60rpx;
					left: 16rpx;
					top: 106rpx;
				}
			}
			.bottom {
				display: flex;
				align-items: center;
				// justify-content: center;
				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}
				text {
					color: #F5AD36;
					font-size: 18rpx;
				}
			}
		}
	}
	.day {
		display: flex;
		padding: 0 20rpx 20rpx 20rpx;
		.item {
			margin-right: 20rpx;
			width: 216rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.txt{
				font-weight: bold;
				font-size: 28rpx;
				color: #1A1A1A;
				line-height: 40rpx;
			}
			.time {
				font-size: 24rpx;
				color: #777777;
				line-height: 34rpx;
			}
		}
		.dayactive {
			background: linear-gradient( 270deg, #0187F5 0%, #2DCCC2 100%);
			.txt {
				color: #FFFFFF;
			}
			.time {
				color: #FFFFFF;
			}
		}
		.more {
			background: #FFFFFF;
			width: 136rpx;
			height: 116rpx;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text {
				font-size: 28rpx;
				color: #1A1A1A;
				line-height: 40rpx;
			}
		}
	}
	.listbox {
		margin: 0 20rpx;
		background-color: #fff;
		.listitem {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				display: flex;
				align-items: center;
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
				}
				text {
					color: #626262;
					font-size: 28rpx;
					line-height: 36rpx;
				}
			}
			.right {
				display: flex;
				align-items: center;
				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 20rpx;
				}
				text {
					color: rgba(244,146,69);
					font-size: 28rpx;
					line-height: 36rpx;
				}
			}
		}
	}
	.logout {
	
		margin: 0 auto;
		padding-top: 80rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		
		text {
			font-weight: 400;
			font-size: 28rpx;
			color: #F4190A;
			line-height: 40rpx;
		}
	}
  }
</style>
